<template>
	<view>
		<z-paging ref="paging" :refresher-enabled="false" v-model="dataList" :refresher-out-rate="0.8"
			auto-scroll-to-top-when-reload bg-color="#F4F5F9"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			@query="queryList">
			<view class="contentWrap">
				<view style="padding: 30rpx 30rpx 40rpx 0">
					<u--text prefixIcon="edit-pen-fill" iconStyle="font-size: 28px;color:#588BF3" text="添加保单记录" size="18" @click="addLaptop()" color="#588BF3" align="right"></u--text>
				</view>
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="item_name flex_wrap row_between row_top">
						<view class="customerName flex_wrap row_top" @click="toDetail(item)">
							<u-icon name="account" color="#588BF3" size="22"></u-icon>
							<text>保单客户：</text>
							<text style="margin-right:4rpx">{{item.customerName ? item.customerName : '暂无' }}</text>
							<text>{{item.customerMobile ? item.customerMobile : ''}}</text>
						</view>
						<view style="display: flex; align-items: right" @click="edit(item)">
							<u-icon name="edit-pen" color="#588BF3" size="22"></u-icon>
						</view>
					</view>
					<view class="item_time flex_wrap" @click="toDetail(item)">
						<u-icon name="calendar" color="#588BF3" size="22"></u-icon>
						<u-text :text="`保单时间：${$u.timeFormat(item.createTime)}`" bold size="28rpx" />
					</view>
					<view class="item_detail flex_wrap flex_column">
						<view class="item_wrap" @click="toDetail(item)"> 
							<text class="my_text" space="ensp">{{ item.info }}</text>
						</view>
						<view class="item_delete" @click="deleteFun(item)">
							<u--text prefixIcon="trash" iconStyle="font-size: 16px;color:#999999" text="删除此条记录"
								size="12" color="#999" :margin="10" align="right"></u--text>
						</view>
					</view>
				</view>
			</view>
			<u-modal :show="modalShow" @confirm="confirm" ref="uModal" :asyncClose="true" content="确定删除该记录？"
				showCancelButton center @cancel="modalShow = false"></u-modal>
		</z-paging>
	</view>
</template>

<script>
	import {
		list,
		note_servicedelete,
	} from "@/api/mybookSalesman.js";
	export default {
		data() {
			return {
				modalShow: false,
				showDate: false,
				value1: Number(new Date()),
				createTime: "",
				info: "",
				current: "2",
				inactiveStyle: {
					fontSize: "32rpx",
				},
				activeStyle: {
					fontSize: "32rpx",
					fontWeight: "bold",
					color: "#588BF3",
				},
				dataList: [],
				type: "",
				editData: "",
				customerId:''
			};
		},
		onShow() {
			this.$refs.paging.reload();
		},
		onLoad(op) {
			this.customerId = op.customerId
			console.log(op,this.customerId)
		},
		methods: {
			addLaptop(){
				this.$u.route({
					url: "/pages_balance/laptop/add/index",
					params: {
						current:this.current,
						customerId:this.customerId,
						type :'添加'
					},
				});
			},
			edit(item){
				const data = JSON.stringify(item);
				this.$u.route({
					url: "/pages_balance/laptop/add/index",
					params: {
						current:this.current,
						type :'编辑',
						data
					},
				});
			},
			toDetail(item){
				const data = JSON.stringify(item);
				this.$u.route({
					url: "/pages_balance/laptop/detail/index",
					params: {
						current:this.current,
						type :'编辑',
						data
					},
				});
			},
			deleteFun(item) {
				this.editData = item;
				this.modalShow = true;
			},
			async confirm() {
				const {
					code,
					data,
					msg
				} = await note_servicedelete(
					this.editData.id
				);
				if (code === 200) {
					const index = this.dataList.findIndex((item) => {
						return item.id === this.editData.id;
					});
					this.modalShow = false;
					this.dataList.splice(index, 1);
				}
			},
			async queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					notepadType: this.current,
					customerId:this.customerId 
				};
				const result = await list(params);
				const rows = result.data.rows;
				this.$refs.paging.completeByTotal(rows, result.data.total);
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	.search {
		padding: 32rpx 28rpx;
	}

	.contentWrap {
		background: #ffffff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: 30rpx;
		margin: 40rpx 28rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.dateWrap {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		background: #f1f1f1;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		line-height: 80rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin: 20rpx 0;
	}

	.item {
		padding-left: 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	.item:before {
		content: "";
		position: absolute;
		width: 2rpx;
		height: 92%;
		left: 32rpx;
		top: 70rpx;
		border-width: 2rpx;
		border-left: 2rpx dashed #d8d8d8;
	}

	.item::after {
		content: "";
		width: 20rpx;
		height: 20rpx;
		background-color: #5e78ed;
		position: absolute;
		top: 40rpx;
		left: 5%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 0 12rpx rgba(226, 228, 251, 0.8);
	}

	.item_time {
		// height: 80rpx;
		padding: 0 24rpx;
	}
	.item_name {
		// min-height: 80rpx;
		padding: 18rpx 24rpx;
	}

	::v-deep u-textarea {
		background: #f1f1f1;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.item_detail {
		padding: 26rpx 20rpx 20rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		font-size: 28rpx;

		.item_wrap {
			background: #f3f7ff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			min-height: 200rpx;
			color: #333;
		}
		.my_text {
			word-break: break-word; //可以避免文字超出限制
		}
		.item_delete {
			margin-top: 20rpx;
		}
	}
	.customerName{
		 font-weight: bold;
		 font-size: 28rpx;
	}
</style>
